<template>
    <div class="wrap-login">
        <h1 class="title">后台系统登入</h1>
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
            <Form-item prop="user">
                <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </Form-item>
            <Form-item prop="password">
                <Input type="password" v-model="formInline.password" placeholder="Password"  @on-enter="handleSubmit('formInline')">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
            </Form-item>
        </Form>
    </div>
</template>
<script>
export default {
    mounted() {
        // console.log(this.$store.getters.getUser,8888)
    },
    data() {
        var passwordReg = /[a-zA-Z]{4}/;
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (!passwordReg.test(value)) {
                callback(new Error('请输入密码位数不对'));
            } else {
                callback();
            }
        };
        return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            var that = this;
            this.$refs[name].validate((valid) => {
               if(valid){
                    if (this.formInline.password == 'admin') {
                    sessionStorage.setItem('user', this.formInline.user);
                    this.$Message.success('登入成功！', 1, function () {
                        that.$store.dispatch('saveUser', that.formInline.user);
                        that.$router.push('/main/home-news');
                    });
                } else {
                    console.log('用户名或者密码错误！')
                    this.$Message.error('用户名或者密码错误！', 1, function () {
                        that.$refs['formInline'].resetFields();
                    })
                }
               }
            })
        }
    },
    created() {
        this.formInline = {
            user: '',
            password: ''
        };
    }
}
</script>
<style lang="less">
.wrap-login {
    width: 350px;
    margin: 180px auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px 50px;
    box-shadow: 0 0 10px #333;
    h1.title {
        margin-bottom: 20px;
    }
}
</style>
